<template>
  <div class="ban">
    <div class="header">
      <table>
        <tr>
          <td>
            <span style="margin-left: 20px; width: 80px">玩家ID：</span>
            <el-input v-model="player_id" placeholder="请输入玩家id"></el-input>
          </td>
          <td>
            <el-button type="primary" @click="search()">查询</el-button>
          </td>
        </tr>
      </table>
    </div>
    <div class="content">
      <el-main v-loading="loading">
        <el-table
          border
          :fit="true"
          :header-cell-style="{
            color: '#333',
            fontFamily: 'MicrosoftYaHeiUI',
            fontWeight: 500,
            fontSize: '16px',
          }"
          :data="tableData.slice((currentPage - 1) * pageSize,currentPage * pageSize)"
        >
          <el-table-column 
            sortable 
            prop="server_id" 
            label="服务器"
          >
          </el-table-column>
          <el-table-column 
            sortable 
            prop="player_id" 
            label="玩家ID"
          >
          </el-table-column>
          <el-table-column 
            sortable 
            prop="state" 
            label="状态"
          >
          </el-table-column>
          <el-table-column 
            sortable 
            prop="ban_type" 
            width="300"
            label="封禁类型"
          >
            <template slot-scope="{$index,row}">
               <el-select v-if="showEdit[$index]" v-model="row.ban_type" placeholder="请选择服务器">
                <el-option
                  v-for="(item, index) in ban_typeArr"
                  :label="item.label"
                  :key="index"
                  :value="item.value"
                ></el-option>
              </el-select>
              <span v-if="!showEdit[$index]">{{row.ban_type}}</span>
            </template>
          </el-table-column>
          <el-table-column 
            sortable 
            width="300"
            prop="ban_reason" 
            label="封禁原因"
          >
          <template slot-scope="{$index,row}">
              <el-input v-if="showEdit[$index]" v-model="row.ban_reason"></el-input>
              <span v-if="!showEdit[$index]">{{row.ban_reason}}</span>
          </template>
          </el-table-column>
          <el-table-column
            header-align="center"
            align="center"
            width="300"
            label="操作"
          >
            <template slot-scope="{$index,row}">
              <el-button size="small" @click="editban(row,$index)" type="primary" v-if="!showEdit[$index]">
                 编辑
              </el-button>
              <el-button size="small" type="success" @click="handleSave($index, row)"  v-if="showEdit[$index]">保存</el-button>
              <el-button size="small" type="danger"  @click="handleCancel($index)"  v-if="showEdit[$index]">取消</el-button>
              <el-button size="small" v-if="row.state==='启用'||!showEdit[$index]" @click="ban(row)" type="success">
                 封禁
              </el-button>
              <el-button size="small" v-else @click="relieveban(row)" type="danger">
                解除封禁
              </el-button>
            </template>
          </el-table-column>
        </el-table>
        <pageNation
          :total="tableData.length"
          :page-size="pageSize"
          @pageChange="pageChange"
          :page_index="currentPage"
        />
      </el-main>
    </div>
  </div>
</template>
<script>
import pageNation from "../../components/pagenation/pageNation";
export default {
  name: "Ban",
  components: { pageNation },
  data() {
    return {
      player_id: "",
      showEdit:[],
      ban_typeArr:[
        {label:"角色名禁言",value:"角色名禁言"},
        {label:"角色名封禁",value:"角色名封禁"},
        {label:"角色ID封禁",value:"角色ID封禁"},
        {label:"设备号封禁",value:"设备号封禁"},
      ],
      currentPage: 1, //当前页数
      pageSize: 10, //每页的数据
      tableData: [
        {
        server_id:100,
        player_id:1001,
        state:"启用",
        ban_type:"类型",
        ban_reason:"原因"
        }
      ],
      loading: false,
    };
  },
  methods: {
    //分页
    pageChange(item) {
      this.currentPage = item.page_index;
      this.pageSize = item.page_limit;
    },
    //查询
    search() {
    },
    //编辑
    editban(index, row){
      this.showEdit[index] = true;
      this.$set(this.showEdit,row,true)
    },
    //保存信息
    handleSave(){

    },
    //取消保存
    handleCancel(index,row){
      this.showEdit[index] = false;
      this.$set(this.showEdit,index,row,false)
    },
    //解除封禁
    relieveban(row) {
     
    },
    //封禁
    ban(row) {
    
    }
  },
};
</script>
<style scoped>
.ban {
  width: 100%;
  height: auto;
  background-color: #fff;
}
.ban td {
  padding: 10px;
  font-size: 14px;
  display: flex;
  float: left;
}
</style>